<template>
  <nav class="pagination">
    <button class="arrow"><i class="fa fa-angle-left"></i></button>
    <button v-for="p in pages" :key="p" :class="{active:p===1}">
      {{ p }}
    </button>
    <span class="ellipsis">…</span>
    <button>8</button>
    <button class="arrow"><i class="fa fa-angle-right"></i></button>
  </nav>
</template>

<script>
export default {
  name: 'Pagination',
  data () {
    return { pages: [1, 2, 3] }
  }
}
</script>

<style scoped>
.pagination{display:flex;justify-content:center;gap:4px;margin-top:40px}
.pagination button,.ellipsis{min-width:36px;height:36px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:14px;display:grid;place-items:center;}
.pagination button.active{background:#8B5A2B;color:#fff;border-color:#8B5A2B}
.arrow{cursor:pointer}
.ellipsis{cursor:default;background:transparent;border:none}
</style>